<%--
  Created by IntelliJ IDEA.
  User: Teacher
  Date: 2025/9/10
  Time: 8:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <script>
        function checkUsername() {
            let username = document.getElementById("username").value;
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let result = xhr.responseText;
                    document.getElementById("s1").innerHTML = result;
                }
            };
            // get请求
            // xhr.open("get","${pageContext.request.contextPath}/checkUsername?username="+username);
            // xhr.send(null);

            // post请求
            xhr.open("post", "${pageContext.request.contextPath}/checkUsername");
            // 如果是post请求,需要开发者手动设置参数类型
            // 相当于表单数据的enctype="application/x-www-form-urlencoded"
            // 在Ajax中,默认通过payload的方式的传递,并不是表单数据
            // 此时数据传输方式为:text/plain;charset=UTF-8
            // 需要通过请求头Content-type来更改数据传输方式
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            // post请求参数在send方法中传递
            xhr.send("username=" + username);
        }
    </script>
</head>
<body>
<h1>用户注册</h1>
<a href="${pageContext.request.contextPath}/jsp/login.jsp">返回登录</a>
<hr>
<form action="${pageContext.request.contextPath}/register.user" method="post">
    用户名:<input type="text" name="username" id="username" onblur="checkUsername()"><span style="font-size: 12px;" id="s1"></span><br>
    密&nbsp;&nbsp;&nbsp;码:<input type="password" name="password"><br>
    电&nbsp;&nbsp;&nbsp;话:<input type="text" name="phone"><br>
    地&nbsp;&nbsp;&nbsp;址:<input type="text" name="address"><br>
    <input type="submit" value="注册">
    <span style="color:red;">${registerMsg}</span>
</form>
</body>
</html>
